<template>
  <div class="about">
    <!-- <h1>This is an about page</h1>
    <h1>{{ $store.state.str }}</h1>
   <ul>
     <li v-for="(item, index) in $store.state.globalList" :key="index">{{item.title}}</li>
   </ul> -->
  <button @click="changeName">修改名字</button>
  <h1>{{ $store.state.user.username }}</h1>
  <h1>2{{ $store.state.str }}</h1>
  <br>
  <br>
    <div class="login">
      <el-form v-model="regist" style="width:400px; padding-top:80px;" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
            label="用户名"
            prop="name"
        >
            <el-input  v-model="regist.text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="密码"
            prop="padd"
        > <el-input type="password" v-model="regist.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="jump(regist)">登陆</el-button>
        </el-form-item>
</el-form>
    </div>
  </div>
</template>
<script>
export default ({
  name:'about',
  data(){
    return{
      regist:[
        {text:'',pass:''}
      ],
    }
  },
  created(){
    // console.log(JSON.parse(localStorage.getItem('regist')))
    // let arr = JSON.parse(localStorage.getItem('regist'));
    // console.log(arr.text)
    // console.log('store',this.$store.state.regist[0].name)
  },
  methods:{
    changeName(){
      this.$store.commit('user/setName','小红')
      console.log(this.$store);
      // this.$store.commit({//提交的两种方式
      //   type:'user/setName',
      //   name:'小红'
      // })
    },
    jump(){
      console.log(this.regist)
      console.log('store',this.$store.state.regist)
      let regist = JSON.parse(localStorage.getItem('regist'));
      let name= regist.name;
      let pass= regist.pass;
      if(name == this.regist.text && pass == this.regist.pass){
        this.$router.push({
          name:'Home'
        })
      }else{
        alert('用户名密码输入不正确，请重新输入')
      }
    }
  }
})
</script>
<style lang="scss" scoped>
  .login{
    width: 500px;
    height: 300px;
    box-shadow: 0 0 4px rgb(109, 108, 108);
    margin: 100px auto;
  }
</style>


